<template>
    <!-- #ifndef H5 -->
    <u-sticky h5-nav-height="0" bg-color="transparent">
        <u-navbar
            :class="{ 'fixed top-0 z-10': isLargeScreen }"
            :is-back="false"
            :is-fixed="true"
            :title="metaData.title"
            :custom-title="metaData.title_type == 2"
            :border-bottom="false"
            :title-bold="true"
            :background="{ background: 'rgba(256,256, 256, 0)' }"
            :title-color="percent > 0.5 ? '#000' : metaData.text_color == 1 ? '#fff' : '#000'"
        >
            <template #default>
                <navigator
                    url="/pages/search/search"
                    class="mini-search"
                    hover-class="none"
                    :style="{ opacity: isLargeScreen ? 1 : percent }"
                >
                    <u-icon name="search"></u-icon>
                </navigator>
            </template>
            <template #title>
                <image
                    class="!h-[54rpx]"
                    :src="metaData.title_img"
                    mode="widthFix"
                ></image>
            </template>
        </u-navbar>
    </u-sticky>
    <!-- #endif -->
	<view class="flex items-center">
		<navigator
			v-if="!isLargeScreen"
		    url="/pages/city/city"
		    :style="{ opacity: 1 - percent }"
		    hover-class="none"
		>
		   <view class="pl-4 text-lg u-line-1">{{cityName?cityName:'滁州市'}}</view>
		</navigator>
		<view style="flex:1;">
			<navigator
			    v-if="!isLargeScreen"
			    url="/pages/search/search"
			    class="px-[24rpx] mt-[24rpx] mb-[30rpx]"
			    :style="{ opacity: 1 - percent }"
			    hover-class="none"
			>
			    <u-search
			        placeholder="请输入关键词搜索"
			        :height="72"
			        :disabled="true"
			        :show-action="false"
			        bgColor="#ffffff"
			    ></u-search>
			</navigator>
		</view>
	</view>
</template>

<script setup lang="ts">
import {computed} from "vue";
import { onLoad,onShow } from '@dcloudio/uni-app';
import { getCode } from '@/api/shop';
import { ref } from 'vue';
const cityName = ref<String>('');
const cityCode = ref<String>('');
const props = defineProps({
    pageMeta: {
        type: Object,
        default: () => []
    },
    content: {
        type: Object,
        default: () => ({})
    },
    styles: {
        type: Object,
        default: () => ({})
    },
    isLargeScreen: {
        type: Boolean
    },
    percent: {
        type: Number
    }
})

const metaData: any = computed(() => {
    return props.pageMeta[0].content
})


const getLatLon = async() => {
	// #ifdef MP-WEIXIN
	uni.getFuzzyLocation({
		type: 'wgs84',
		success: (res) => {
			console.log(res)
			reverseGeocode(res.latitude, res.longitude);
		},
		fail: (err) => {
			console.log(err);
			uni.$u.toast(err.errMsg);
		}
	});
	// #endif
	// #ifdef H5
	uni.getLocation({
		type: 'gcj02',
		success: (res) => {
			// console.log(res, '获取经纬度成功');
			reverseGeocode(res.latitude, res.longitude);
		},
		fail: (err) => {
			console.log(err);
			if (err.errMsg === 'getLocation:fail:ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF' || err.errMsg === 'getLocation:fail system permission denied') {
				uni.showModal({
					content: '请开启手机定位服务',
					showCancel: false
				});
			} else if (err.errMsg === 'getLocation:fail:system permission denied') {
				uni.showModal({
					content: '请给微信开启定位权限',
					showCancel: false
				});
			}
		}
	});
	// #endif
	
}

const reverseGeocode = async (lat, lng) => {
	try {
		const data = await getCode({lat, lng});
		// console.log(data.ad_info,'当前城市')
		uni.setStorageSync('cityName', data.ad_info.city);
		uni.setStorageSync('cityCode', data.ad_info.adcode);
		cityName.value = data.ad_info.city;
		cityCode.value = data.ad_info.adcode;
	} catch (e) {
		console.log('报错=>', e);
		uni.setStorageSync('cityName', '滁州市');
		uni.setStorageSync('cityCode', '341100');
		cityName.value = '滁州市';
		cityCode.value = '341100';
	}
};

onShow(() => {
    if(uni.getStorageSync('cityName') || uni.getStorageSync('cityCode')){
    	cityName.value = uni.getStorageSync('cityName');
    	cityCode.value = uni.getStorageSync('cityCode');
    }
})
onLoad(() => {
	getLatLon();
});

</script>

<style scoped>
.mini-search {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60rpx;
    height: 60rpx;
    margin-left: 20rpx;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}
.u-line-1{
	color:#000;
}
</style>
